<template>
	<view class="header-one">
	    <view class="one-haowu">
	        好物圈
	    </view>
	   <view class="one-list">
	        <view v-for="(item,index) in datalist" :key="index" class="tiao" @click="onHuan(index)">
	           <text :class="xian==index?'active':''">{{item.name}}</text>
	            <view class="xian" v-if="xian==index"></view>
	        </view>
	    </view>
	</view>
	
	<swiper vertical circular class="Carousel">
	    <swiper-item v-for="(item,index) in Carousel" :key="index">
	        <view>
	            <swiper circular class="Carousel">
	                <swiper-item v-for="(itm,index2) in item.twolist" :key="index2">
	                    <image :src="itm" mode="" class="img" />
	                </swiper-item>
	            </swiper>
	        </view>
	    </swiper-item>
	</swiper>
</template>

<script lang="ts">
	import {
		defineComponent,
		ref
	} from "vue";
	import datalists from "../../untils/haowuquan.js";
	export default defineComponent({
		setup() {
			console.log("接受的数据",datalists)
			 
			var datalist = ref([]) //全部数据
			 datalist.value=datalists
			 
			var xian = ref(0) //下标
			
			var Carousel = ref([]) //切换数据
			Carousel.value=datalists[0].onedata;
			
			let onHuan=(index:number) => {
					console.log(index)
					xian.value=index,
					Carousel.value= datalists[index].onedata
				}
		//--获取元素
		//#ifdef MP
		uni.createSelectorQuery().select(".one-haowu").boundingClientRect(data=>{
				console.log("获取元素的参数",data)
		}).exec()
		//#endif 
				return {
					onHuan,
					datalist,
					xian,
					Carousel
				};
		}
	});
</script>

<style scoped>

.header-one{
    width: 100%;
    height: 270rpx;
    background-color:#F02E72;
    font-size: 40rpx;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  
}
.one-haowu{
    margin: 0 auto;
}
.one-list{
    display: flex;
    justify-content:space-evenly;
}

.tiao{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.one-list text{
    color: #FFE0EB;
    display: flex;
}
.one-list .active{
    color: white;
}
.xian{
    border-bottom: 5px solid white;
    width:60rpx ;
    margin-top: 10rpx;
}
.img{
    width: 100%;
    height: 100%;
}
.Carousel{
    height:calc(100vh - 270rpx);
    background-color: darkblue;
}
</style>
